<template>
  <div class="film">
    <div class="filmLeft">
      <!-- 电影的座位 -->
      <h3>屏幕</h3>
      <ul>
        <li v-for="(item, index) in seatflag" :key="index" class="seat"
          :class="{'noSeat': seatflag[index]==-1,
                   'seatSpace': seatflag[index]==0,
                   'seatActive': seatflag[index]==1,
                   'seatNoUse': seatflag[index]==2}"
          @click="handleClick(index)">
        </li>
      </ul>
    </div>
    <div class="filmRight">
      <div class="rightTop">
        <div class="rightTopleft">
          <!-- 电影的海报 -->
          <a href="#">
            <img :src="filmImgUrl" alt="..." height="200">
          </a>
        </div>
        <div class="rightTopRight">
          <!-- 电影的基本信息 -->
          <p>影片中文名：<strong>{{ filmInfo.name }}</strong></p>
          <p>影片英文名：<strong>{{ filmInfo.nameEnglish }}</strong></p>
          <p>影片类型：<strong>{{ filmInfo.storyType }}</strong></p>
          <p>版本：<strong>{{ filmInfo.copyRight }}</strong></p>
          <p>{{ filmInfo.place }} / {{ filmInfo.timeLength }}</p>
          <p>{{ filmInfo.timeShow }}</p>
        </div>
      </div>
      <div class="rightBootom">
        <!-- 电影票的购买信息 -->
        <p>电影院：<strong>{{ filmInfo.cinema }}</strong></p>
        <p>放映影厅：<button type="checkbox" v-for="(item, index) in filmInfo.room" :key="index"
          @click="checkRoom(index)" :class="{'checked': index == curRoom}"><strong>{{ item.place }}<br>{{ item.time }}</strong></button></p>
        <p>日期：<strong>{{ filmInfo.time }}</strong></p>
        <p id="seatSelect">
          座位：
          <span v-for="(item,index) in curSeatDisp" :key="index">
            <br v-if="index == 5">
            <br v-if="index == 5">
            {{ item + " \n "}}
          </span>
        </p>
        <p>
          已选择：
          <strong style="color:red;">{{ count }}</strong>
        </p>
        <p>单价：<strong>{{ numberFormat(filmInfo.unitPrice) }}</strong></p>
        <p>总价：<strong style="color: red;">{{ numberFormat(fileTotal) }}</strong></p>
        <strong style="color:red;">再次单击座位可取消。
          <span v-if="maxFlag">您一次最多只能买十张票！</span>
        </strong>
        <br>
        <button type="button" class="btn" @click="filmSubmit">
          确认下单
        </button>
        <button v-if="canBuyAll" type="button" class="btn" @click="buyAll">
          包场
        </button>
        <br>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from '@vue/reactivity';
import { computed, onBeforeUpdate, onMounted, watch } from '@vue/runtime-core';
export default {
  setup(){
    const state = reactive({
      seatflag: [],
      filmInfo: {},
      curSeat: [],
      curSeatDisp: [],
      curRoom: 0,
      seatCol: 0,
      maxFlag: false,
      canBuyAll: true,
      filmImgUrl: require('@/assets/film1.png'),
      count: 0
    })
    
    onMounted(() => {
      fetch('/class5/film_initial.json')
        .then(res=>res.json())
        .then(res=>{
          state.filmInfo=res.filmInfo
        })
    })

    onBeforeUpdate(() => {
      updateSeat(state.curRoom)
      state.seatflag.forEach((item)=>{
        if(item === 2) {
          state.canBuyAll = false
        }
      })
    })

    watch(
      () => state.seatflag, (newVal, oldVal) => {
        state.canBuyAll = true
        newVal.forEach((item)=>{
            if(item === 2) {
            state.canBuyAll = false
          }
        })
      }
    )

    const updateSeat = (value) => {
      state.seatflag = state.filmInfo.room[value].seatflag
      state.seatCol = state.filmInfo.room[value].seatCol
    }

    const handleClick = (index) => {
      if(state.seatflag[index] === 1){
        state.seatflag[index] = 0
        state.curSeat.splice(state.curSeat.findIndex(item => item === index), 1)
      }
      else{
        if(state.seatflag[index] === 0 && state.curSeat.length < 10) {
          state.seatflag[index] = 1
          state.curSeat.push(index)
        }
      }
      state.curSeatDisp = []
      for(const data of state.curSeat){
        state.curSeatDisp.push((Math.floor(data / state.seatCol) + 1) + '行' + (data % state.seatCol + 1) + '列')
      }
      var mySeat = state.seatflag.filter(item=>item===1)
      state.count=mySeat.length
      if(state.count>=10) state.maxFlag = true
      else state.maxFlag = false
    }

    const checkRoom = (index) => {
      state.filmInfo.room[index].check = 1
      state.curRoom = index
      updateSeat(state.curRoom)
    }

    const fileTotal = computed(() => {
      return state.count * state.filmInfo.unitPrice
    })

    const numberFormat = (value) => {
      if(typeof(value) === 'number')
        return '￥' + value.toFixed(2)
      else return typeof(value)
    }

    const getImgUrl = (value) => {
      return '@/assets/' + value
    }

    const filmSubmit = () => {
      state.seatflag.forEach((item, index) => {
        if(item === 1) state.seatflag[index] = 2
      })
      state.canBuyAll = false
      state.curSeat = []
      state.curSeatDisp = []
      state.count = 0
    }

    const buyAll = () => {
      if(state.canBuyAll === true){
        state.seatflag.forEach((item, index) => {
          if(item === 0) state.seatflag[index] = 1
          state.count += 1
        })
      }
      state.canBuyAll = false

    }

    return {
      ...toRefs(state),
      fileTotal,
      handleClick,
      checkRoom,
      numberFormat,
      getImgUrl,
      filmSubmit,
      buyAll
    }
  }
};
</script>

<style>
@import url('./class5_css/cinema.css');
</style>